<template>
    <view class="content">
        <view class="box">
            <view class="title">基本信息</view>
            <view class="box-cen">
                <view class="ke-inp-item">
                    <view>楼盘名称</view>
                    <input type="text" v-model="floorName" placeholder="请输入楼盘名称" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>楼盘类型</view>
                    <view class="u-flex" @click="show = true">
                        <input type="text" v-model="lpType" placeholder="请选择楼盘类型" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>项目类型</view>
                    <view class="u-flex" @click="show = true">
                        <input type="text" v-model="lpType" placeholder="请选择项目类型" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>销售状态</view>
                    <view class="u-flex" @click="show = true">
                        <input type="text" v-model="lpType" placeholder="请选择销售状态" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>标签</view>
                    <view class="u-flex" @click="show = true">
                        <input type="text" v-model="lpType" placeholder="请选择标签" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>楼盘位置</view>
                    <view class="u-flex">
                        <input type="text" v-model="address" placeholder="请选择楼盘位置" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="map" size="34" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>地区</view>
                    <view class="u-flex" @click="show = true">
                        <input type="text" v-model="area" placeholder="请选择地区" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item u-p-t-30 u-p-b-30">
                    <view>佣金类型</view>
                    <view class="pay-type">
                        <view class="u-flex u-p-r-50" @click="commissionType = 1">
                            <image :src="commissionType == 1 ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose-02"></image>
                            <view>佣金金额</view>
                        </view>
                        <view class="u-flex" @click="commissionType = 2">
                            <image :src="commissionType == 2 ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose-02"></image>
                            <view>佣金比例</view>
                        </view>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>佣金金额</view>
                    <input type="text" v-model="commission" placeholder="请输入佣金金额" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>结佣节点</view>
                    <input type="text" v-model="point" placeholder="请输入结佣节点" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>单价</view>
                    <input type="digit" v-model="price" placeholder="请输入单价金额" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>户型</view>
                    <input type="text" v-model="houseType" placeholder="请输入户型名称" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>建面</view>
                    <view class="u-flex">
                        <input type="digit" v-model="minArea" class="inp-jm">
                        -
                        <input type="digit" v-model="maxArea" class="inp-jm">
                        m²
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>开盘</view>
                    <input type="text" placeholder="请选择开盘时间" placeholder-class="p-inp" class="inp" disabled 
                        v-model="startTime" @click="KStimeShow = true">
                </view>
                <view class="ke-inp-item">
                    <view>交房</view>
                    <input type="text" placeholder="请选择交房时间" placeholder-class="p-inp" class="inp" disabled 
                        v-model="endTime" @click="JStimeShow = true">
                </view>
                <view class="remark">
                    <view>楼盘封面图</view>
                    <view class="img-box">
                        <image src="/static/image/up_photo.png" class="up-photo"></image>
                    </view>
                </view>
                <view class="remark border-t">
                    <view>楼盘图片</view>
                    <view class="img-box">
                        <image src="/static/image/up_photo.png" class="up-photo"></image>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">
                <view>户型信息</view>
                <view class="add">
                    <text>+</text>添加户型
                </view>
            </view>
            <view class="box-cen">
                <view class="ke-inp">
                    <view>户型一</view>
                    <view class="u-flex">
                        <image src="../../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
                        <image src="/static/icon/del.png" class="del-icon"></image>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>户型类型</view>
                    <view class="u-flex" @click="show = true">
                        <input type="text" v-model="lpType" placeholder="请选择户型类型" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>户型名称</view>
                    <input type="text" v-model="hName" placeholder="请输入户型名称" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>面积</view>
                    <input type="text" v-model="hPrice" placeholder="请输入面积" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>售价</view>
                    <input type="text" v-model="hPrice" placeholder="请输入售价金额" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>朝向</view>
                    <input type="text" v-model="hFace" placeholder="请输入户型朝向" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>装修</view>
                    <input type="text" v-model="hFit" placeholder="请输入装修情况" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>户型分布</view>
                    <input type="text" v-model="hSpread" placeholder="请输入户型分布" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>楼层类型</view>
                    <input type="text" v-model="hFloor" placeholder="请输入楼层类型" placeholder-class="p-inp" class="inp">
                </view>
                <view class="remark">
                    <view>户型封面图</view>
                    <view class="img-box">
                        <image src="/static/image/up_photo.png" class="up-photo"></image>
                    </view>
                </view>
                <view class="remark border-t">
                    <view>户型图片</view>
                    <view class="img-box">
                        <image src="/static/image/up_photo.png" class="up-photo"></image>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">
                <view>佣金方案</view>
                <view class="add">
                    <text>+</text>添加方案
                </view>
            </view>
            <view class="box-cen">
                <view class="ke-inp">
                    <view>基础方案一</view>
                    <view class="u-flex">
                        <image src="../../../static/icon/arrow_d_01.png" class="arrow-d-01"></image>
                        <image src="/static/icon/del.png" class="del-icon"></image>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>佣金类别</view>
                    <view class="u-flex" @click="show = true">
                        <input type="text" v-model="lpType" placeholder="请选择佣金类型" placeholder-class="p-inp" class="inp" disabled>
                        <u-icon name="arrow-down-fill" size="24" color="#ababab" class="u-p-l-10"></u-icon>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>方案名称</view>
                    <input type="text" v-model="yPlan" placeholder="请输入方案名称" placeholder-class="p-inp" class="inp">
                </view>
                <view class="ke-inp-item">
                    <view>跳点条件</view>
                    <view class="u-flex">
                        <input type="number" v-model="yMin" class="inp-jm">
                        -
                        <input type="number" v-model="yMax" class="inp-jm">
                        套
                    </view>
                </view>
                <view class="ke-inp-item u-p-t-30 u-p-b-30">
                    <view>佣金类型</view>
                    <view class="pay-type">
                        <view class="u-flex u-p-r-50" @click="commissionType = 1">
                            <image :src="commissionType == 1 ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose-02"></image>
                            <view>佣金金额</view>
                        </view>
                        <view class="u-flex" @click="commissionType = 2">
                            <image :src="commissionType == 2 ? '../../static/icon/choose.png' : '../../static/icon/cancel.png'" class="choose-02"></image>
                            <view>佣金比例</view>
                        </view>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>计算规则</view>
                    <view class="u-flex">
                        <input type="digit" v-model="yRule" placeholder="请输入计算规则" placeholder-class="p-inp" class="inp">
                        <text class="u-p-l-10">元/套</text>
                    </view>
                </view>
                <view class="ke-inp-item">
                    <view>生效日期</view>
                    <input type="text" placeholder="请选择生效日期" placeholder-class="p-inp" class="inp" disabled
                        v-model="sxTime" @click="SXtimeShow = true">
                </view>
                <view class="ke-inp-item">
                    <view>截止日期</view>
                    <input type="text" placeholder="请选择截止日期" placeholder-class="p-inp" class="inp" disabled
                        v-model="jzTime" @click="JZtimeShow = true">
                </view>
            </view>
        </view>
        
        <view class="box">
            <view class="title">合作规则</view>
            <view class="u-p-20">
                <textarea v-model="content" placeholder="请输入规则" placeholder-class="p-inp"></textarea>
            </view>
        </view>
        
        <view class="box">
            <view class="title">
                <view>周边楼盘推荐</view>
                <view class="add">
                    <text>+</text>添加楼盘
                </view>
            </view>
            <view class="box-cen u-p-t-20">
                <view class="item" v-for="(item, index) in 2" :key="index" @click="$gTo('../floor/floor-details')">
                    <image src="/static/del/del_09.png" class="del-09"></image>
                    <view>
                        <view class="u-flex u-row-between u-col-center">
                            <view>
                                <view class="name">阳光硅谷阳光硅谷阳光硅谷阳光硅谷</view>
                                <view class="area">朝阳区 · 8588元/m²</view>
                            </view>
                            <image src="/static/icon/del.png" class="del-icon"></image>
                        </view>
                        <view class="price">
                            <view>
                                <text class="p-l">1.2</text>
                                <text class="p-l-r">万元</text>
                                <text>/套佣金</text>
                            </view>
                            <view class="plan">2个方案</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="btn" @click="doSubmit">立即修改</view>
        
        <!-- 楼盘类型 -->
        <u-select v-model="show" mode="single-column" :list="lpTypeList" @confirm="confirm"></u-select>
         <!-- :default-value="arrIndex" -->
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
        <u-picker v-model="SXtimeShow" mode="time" :params="timeParams" @confirm="chooseTime(3, $event)"></u-picker>
        <u-picker v-model="JZtimeShow" mode="time" :params="timeParams" @confirm="chooseTime(4, $event)"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                floorName: '',//楼盘名称
                show: false,//楼盘类型
                lpTypeList: [],
                lpType: '',
                lpTypeId: '',
                // arrIndex: [0],
                area: '',//楼盘位置
                commissionType: 1,//佣金类型
                commission: '',//佣金金额
                point: '',//结佣节点
                price: '',//单价
                houseType: '',//户型
                minArea: '',//建面
                maxArea: '',//
                KStimeShow: false, //开盘时间
                startTime: '',
                JStimeShow: false, //交房时间
                endTime: '', 
                hName: '',//户型名称
                hPrice: '',//售价
                hFace: '',//朝向
                hFit: '',//装修
                hSpread: '',//户型分布
                hFloor: '',//楼层类型
                yPlan: '',//方案名称
                yMin: '',//跳点条件
                yMax: '',//
                yRule: '',//计算规则
                SXtimeShow: false, //生效日期
                sxTime: '', 
                JZtimeShow: false, //截止日期
                jzTime: '', 
                content: '',//合作规则
                
                name: '',
                khgx: '',
                tel: '',
                khList: [], //客户列表
                disabled: false,
                timeParams: { //时间格式
                	year: true,
                	month: true,
                	day: true,
                	hour: false,
                	minute: false,
                	second: false
                },
                id: '',
                data: {},
                screen: {},//下拉选项
            };
        },
        onLoad(option) {
            // uni.setNavigationBarTitle({
            // 	title:'添加认购信息'
            // })
            this.id = option.id
            this.getData()
            this.getScreen() //获取下拉选项
        },
        methods: {
            getData() {
                this.$ajax('properties_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//楼盘id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.data = ret.detail
                        let latitude = Number(this.data.latitude).toFixed(4)
                        let longitude = Number(this.data.longitude).toFixed(4)
                        // this.getLocation(latitude,longitude)
                        // this.getLocation(43.8332,125.2884)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            doSubmit() {
                
            },
            // 选择楼盘类型
            confirm(e) {
                console.log(e);
                this.lpType = e[0].label
                this.lpTypeId = e[0].value
                // let index = 0;
                // for (let i = 0; i < this.list.length; i++) {
                //     if (this.list[i].label == e[0].label) {
                //         index = i;
                //         break
                //     }
                // }
                // this.arrIndex[0] = index
            },
            //选择时间
            chooseTime(num, e) {
            	if (num == 1) {
                    this.startTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 2) {
                    this.endTime = e.year + '-' + e.month + '-' + e.day;
            	}
                if (num == 3) {
                    this.sxTime = e.year + '-' + e.month + '-' + e.day;
                }
                if (num == 4) {
                    this.jzTime = e.year + '-' + e.month + '-' + e.day;
                }
            },
            // 添加客户信息
            addName() {
                this.khList.push({
                    name: this.name,
                    khgx: this.khgx,
                    tel: this.tel,
                })
                this.name = ''
                this.khgx = ''
                this.tel = ''
            },
            delName(index) {
                this.khList.splice(index, 1)
            },
            
            // 获取筛选项
            getScreen() {
                this.$ajax('properties_screen', {
                    // user_token: this.$getSync('userToken'),
                    type: 1,//1筛选加不限
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.screen = ret.detail
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .pay-type{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .choose-02{
        width: 31rpx;
        height: 31rpx;
        margin-right: 10rpx;
    }
    .inp-jm{
        background-color: #fafafa;
        width: 200rpx;
        height: 80rpx;
        margin: 10rpx 20rpx;
        text-align: center;
    }
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        background-color: #fff;
        margin-bottom: 20rpx;
        border-radius: 20rpx;
    }
    .title{
        background-color: #effaff;
        padding: 25rpx;
        border-radius: 20rpx 20rpx 0 0;
        color: #00a1e9;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .add{
        color: #fff;
        font-size: 28rpx;
        line-height: 1;
        background-color: #00a1e9;
        padding: 13rpx 25rpx;
        border-radius: 50rpx;
    }
    .add>text{
        font-weight: bold;
        padding-right: 5rpx;
    }
    .border-t{
        border-top: 2rpx solid #e6e6e6;
    }
    .box-down{
        padding: 0 20rpx;
    }
    .box-cen{
        padding: 0 20rpx;
    }
    .info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .info-name{
        font-size: 32rpx;
        font-weight: bold;
    }
    .arrow-d-01{
        width: 16rpx;
        height: 11rpx;
    }
    .del-icon{
        width: 25rpx;
        height: 26rpx;
        margin-left: 30rpx;
    }
    .ke-inp{
        font-size: 26rpx;
        background-color: #f5f5f5;
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
    }
    .tip{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 24rpx;
        color: #45474c;
        padding-top: 20rpx;
    }
    .tip-icon{
        width: 25rpx;
        height: 25rpx;
        margin-right: 10rpx;
    }
    .ke-inp-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .ke-inp-item:last-child{
        border-bottom: none;
    }
    .p-inp{
        color: #acacac;
    }
    .inp{
        width: 470rpx;
        height: 100rpx;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .f-inp{
        width: 110rpx;
        height: 70rpx;
        background-color: #fafafa;
        text-align: center;
        margin: 20rpx 10rpx;
    }
    .add-icon{
        width: 152rpx;
        height: 56rpx;
        margin-top: 15rpx;
    }
    .remark{
        padding: 30rpx 0;
        // border-top: 2rpx solid #e6e6e6;
    }
    textarea{
        width: 100%;
        padding: 20rpx;
        background-color: #fafafa;
    }
    .img-box{
        padding-top: 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-photo{
        width: 168rpx;
        height: 168rpx;
        margin-right: 15rpx;
        margin-bottom: 15rpx;
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 45rpx;
    }
    .del-09{
        width: 213rpx;
        height: 158rpx;
        border-radius: 10rpx;
        margin-right: 15rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        width: 380rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .area{
        padding: 15rpx 0;
        font-size: 24rpx;
        width: 380rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .baobei{
        padding: 15rpx;
        font-size: 27rpx;
        line-height: 1;
        color: #803906;
        background-color: #ffecd2;
        border-radius: 15rpx;
    }
    .price{
        font-size: 24rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .p-l{
        color: #fe3c3c;
        font-size: 36rpx;
        font-weight: bold;
    }
    .p-l-r{
        color: #fe3c3c;
        padding: 0 5rpx;
    }
    .plan{
        color: #5f8fbe;
        font-size: 23rpx;
        line-height: 1;
        padding: 4rpx 13rpx;
        border: 2rpx solid #5f8fbe;
        border-radius: 5rpx;
        margin-left: 12rpx;
    }
    
    
</style>
